<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css">

    body{
        background: #FFC1C1;
    }
	h1{
		text-align: center;
        color: #FFFFFF	;
        text-shadow:0 0 10px;
	}
	table{
		margin: 0 auto;
		width:60%;
		border: 2px solid #ffa7bf;
		border-collapse: collapse;
        background-image:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F01%2F20161201232116_usWhR.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643384293&t=f7570f3ad84428ed814b5e8673e9c76e);
	}
	table th,table td {
		border: 2px solid #ffa7bf;
		padding: 5px;
	}





    .two{
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #ffa7bf;
    border: 1px solid #ffa7bf;
    color: #fff;
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    margin: 0;

    }

    .three{
     position:absolute;
    top:340px;
    left:720px;
}

</style>
</head>
<br>



	<h1>购物列表 </h1>
	<table id="stuff_table">
		<thead>
			<tr>
				<th>商品</th>
				<th>单价</th>
				<th>颜色</th>
				<th>库存</th>
				<th>好评率</th>
				<th>操作</th>
			</tr>
		</thead>
			<tr>
				<td class="name">玲娜贝儿公仔（好想要）</td>
				<td>88</td>
				<td>粉色</td>
				<td>666</td>
				<td>98%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
			<tr>
				<td class="name">美乐蒂玩偶</td>
				<td>80</td>
				<td>粉色</td>
				<td>666</td>
				<td>96%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
			<tr>
				<td class="name">库洛米玩偶</td>
				<td>60</td>
				<td>黑色</td>
				<td>6667</td>
				<td>99.9%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
			<tr>
				<td class="name">玉桂狗玩偶</td>
				<td>80</td>
				<td>蓝色</td>
				<td>666</td>
				<td>98%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
			<tr>
				<td class="name">皮卡丘玩偶</td>
				<td>80</td>
				<td>金色</td>
				<td>466</td>
				<td>100%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
	</table>

	<h1>购物车</h1>
	<table>
		<thead>
			<tr>
				<th>商品</th>
				<th>单价</th>
				<th>数量</th>
				<th>金额</th>
				<th>删除</th>
			</tr>
		</thead>
		<tbody id="goods">
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3" align="center">总计</td>
				<td id="total"></td>
				<td></td>
			</tr>
		</tfoot>
	</table>

            <form class="form-signup form-inline" action="/homepage3" method="GET">
           <div class="three">
           <button class="two" type="submit" id="btn" value="点击" name="sub" >购买</button>
           </div>>
       </form>
</body>
<script type="text/javascript">
function add_shoppingcar(btn) {
	var tr = btn.parentNode.parentNode;
	var tds = tr.getElementsByTagName("td");
	var name = tds[0].innerHTML;
	var price = tds[1].innerHTML;
	var tbody = document.getElementById("goods");
	var row = tbody.insertRow();
	row.innerHTML = "<td>"+name+"</td>"+
	"<td>"+price+"</td>"+
	"<td align='center'>"+
		"<input type='button' value='-' onclick='change(this,-1);' />"+
		"<input type='text' id='num' size='1' readonly='readonly' value='1'/>"+
		"<input type='button' value='+' onclick='change(this,+1);' />"+
	"</td>"+
	"<td>"+price+"</td>"+
	"<td align='center'>"+
		"<input type='button' value='X' onclick='del(this);'/>"+
	"</td>";
	total();
}

function del(obj) {
	var tr = obj.parentNode.parentNode;
	var tbody = tr.parentNode;
	tbody.removeChild(tr);
	total();
}

function total() {
	var tbody = document.getElementById("goods");
	var trs = tbody.getElementsByTagName("tr");
	var sum = 0;
	for(var i=0;i<trs.length;i++){
		var tds = trs[i].getElementsByTagName("td");
		var m = tds[3].innerHTML;
		sum += parseFloat(m);
	}
	var total = document.getElementById("total");
	total.innerHTML = sum;

}
function change(btn,n) {
	var inputs = btn.parentNode.getElementsByTagName("input");
	var amount = parseInt(inputs[1].value);
	if(amount<=1 && n<0){
		return;
	}
	inputs[1].value = amount+n;
	amount = inputs[1].value;
	var tr = btn.parentNode.parentNode;
	var tds = tr.getElementsByTagName("td");
	var price = parseFloat(tds[1].innerHTML);
	var m = amount * price;
	tds[3].innerHTML = m;
	total();
}
 
</script>
</html>